<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/jquery.min.js"></script>
    <style>
        table#stu{
            width: 100%;
            height: 100%;;
            align-content:center;           
            border: 2px solid black;
        }
        table#stu tr{
            height: 50px;
        }
        table#stu tr td{
            border: 1px solid #877777;
            text-align:center;
        }
    </style>
</head>
<body>
    <h2 style="color:brown; text-align: center;">学生基本信息管理</h2>
    <hr width="100%" />
    <br />

    学号：<input style="width:100px;" id="no" type="text" value="" />
    姓名：<input style="width:50px;"  id="name" type="text" value="" />
    性别：<select id="sex">
                <option value="男">男</option>
                <option value="女">女</option>   
        </select>
    生日：<input style="width:60px;"  id="birth" type="text" value="" />
    班级：<select id="iclass">
            <option value="信息20-1班">信息20-1班</option>
            <option value="信息20-2班">信息20-2班</option>   
        </select>
    住所：<input style="width:100px;"  id="address" type="text" value="" />
    <input id="addStu" type="button" value="新增" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input id="txtsearch" type="text" />
    <input type="button" value="搜索" />

    <br /><br />
    <table id="stu" cellpadding="0" cellspacing="0">
        <tr>
            <td>序号</td>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>出身年月日</td>
            <td>班级</td>
            <td>宿舍位置</td>
            <td>操作</td>
        </tr>
        <!-- <tr>
            <td>123456789</td>
            <td>王诗雨</td>
            <td>女</td>
            <td>2002-8-6</td>
            <td>信息20-1班</td>
            <td>12号楼</td>
            <td>
                <input type="button" value="删除" />
                <input type="button" value="修改" />
            </td>
        </tr> -->
    </table>
    <script>
        var arrStu=[
            {
                no:'20210101',
                name:'ADC',
                sex:'女',
                birth:'2001-8-6',
                iclass:'信息20-1班',
                address:'12号楼'
            },
            {
                no:'20210211',
                name:'BLD',
                sex:'男',
                birth:'2001-7-8',
                iclass:'信息20-2班',
                address:'11号楼'
            },
            {
                no:'20210115',
                name:'DHZ',
                sex:'女',
                birth:'2002-3-8',
                iclass:'信息20-1班',
                address:'12号楼'
            },
            {
                no:'20210116',
                name:'QWP',
                sex:'男',
                birth:'2002-5-6',
                iclass:'信息20-2班',
                address:'11号楼'
            }
        ];
        function displayStuInfo(xh, stu){
            var str = "";
            str +="<tr><td>"+xh+"</td>";
            for(var key in stu){
                str +="<td>" + stu[key] + "</td>";
            } 
            str +='<td><input onclick="deleteStuInfo('+xh+',this)" \
                type="button" value="删除" />\
                <input onclick="modifyStuInfo('+xh+')" \
                 type="button" value="修改" /></td>';                   
            str +="</tr>";
            return str;
        }
        function displayStuInfos(){
                var str="";
                for(var i=0;i<arrStu.length;i++){
                    str +=displayStuInfo(i+1, arrStu[i]);
                }
                //alert(str);
                $("#stu").append(str);                
            }
            function empty(){
                $("#no").val("");
                $("#name").val("");
                $("#birth").val("");
                $("#address").val("");
            }
            function addStuInfo(){           
                var     no = $("#no").val();
                var 	name = $("#name").val();
                var 	sex = 	$("#sex").val();
                var 	birth = $("#birth").val();
                var     iclass = $("#iclass").val();
                var     address = $("#address").val();
                if($("#addStu").val() == "新增"){
                    arrStu.push({
                        "no":no,
                        "name":name,
                        "sex":sex,
                        "birth":birth,
                        "iclass":iclass,
                        "address":address
                    });
                    $("#stu").append(
                        displayStuInfo(arrStu.length, arrStu[arrStu.length-1])
                    );
                    empty();
                }else{
                    var tr = $("#stu tr").eq(curStu+1);
                    if(no != arrStu[curStu].no){
                        arrStu[curStu].no = no;
                        tr.find("td:eq(1)").html(no);
                    }                    
                    if(name != arrStu[curStu].name){
                        arrStu[curStu].name = name;
                        tr.find("td:eq(2)").html(name);
                    }
                    if(sex != arrStu[curStu].sex){
                        arrStu[curStu].sex = sex;
                        tr.find("td:eq(3)").html(sex);
                    }
                    if(birth != arrStu[curStu].birth){
                        arrStu[curStu].birth = birth;
                        tr.find("td:eq(4)").html(birth);
                    }
                    if(iclass != arrStu[curStu].iclass){
                        arrStu[curStu].iclass = iclass;
                        tr.find("td:eq(5)").html(iclass);
                    }
                    if(address != arrStu[curStu].address){
                        arrStu[curStu].address = address;
                        tr.find("td:eq(6)").html(address);
                    }
                    empty();
                    $("#addStu").val("新增").css("color","black");
                }
            }
            var curStu = -1;
            function modifyStuInfo(xh){
                var stu = arrStu[xh-1];
                $("#no").val(stu.no);
                $("#name").val(stu.name);
                $("#sex").val(stu.sex);
                $("#birth").val(stu.birth);
                $("#iclass").val(stu.iclass);
                $("#address").val(stu.address);
                $("#addStu").val("保存").css("color","#0099CC");
                curStu = xh -1;
            }

            function deleteStuInfo(xh, obj){
                arrStu.splice(xh-1, 1);
                $(obj).parent().parent().remove();
            }

        $(document).ready(function(){            
            displayStuInfos();
            $("#addStu").click(function(){
                addStuInfo();
            });
        });
    </script>
</body>
</html>